<template>
  <div class="w-full mx-auto">
    <a-grid class="top mt-3" :cols="4" :col-gap="20">
      <a-grid-item>
        <a-card :bordered="false">
          <div class="flex items-center justify-around">
            <div class="icon flex items-center justify-center" style="background-color: #eef4ff">
              <img src="@/assets/statistics/Heart.png"/>
            </div>
            <div>
              <div class="amount font-bold">{{ userStore.user && userStore.user.statistics ? (userStore.user.statistics.yesterday_order_count ? userStore.user.statistics.yesterday_order_count + '+' : 0) : 0 }}</div>
              <div class="name">昨日订单</div>
            </div>
          </div>
        </a-card>
      </a-grid-item>
      <a-grid-item>
        <a-card :bordered="false">
          <div class="flex items-center justify-around">
            <div class="icon flex items-center justify-center" style="background-color: #fff5db">
              <img src="@/assets/statistics/Game.png"/>
            </div>
            <div>
              <div class="amount font-bold">{{ userStore.user && userStore.user.statistics ? (userStore.user.statistics.yesterday_member_count ? userStore.user.statistics.yesterday_member_count + '+' : 0) : 0 }}</div>
              <div class="name">昨日用户</div>
            </div>
          </div>
        </a-card>
      </a-grid-item>
      <a-grid-item>
        <a-card :bordered="false">
          <div class="flex items-center justify-around">
            <div class="icon flex items-center justify-center" style="background-color: #fff4f0">
              <img src="@/assets/statistics/Bag.png"/>
            </div>
            <div>
              <div class="amount font-bold">{{ userStore.user && userStore.user.statistics ? (userStore.user.statistics.month_order_count ? userStore.user.statistics.month_order_count + '+' : 0) : 0 }}</div>
              <div class="name">本月订单</div>
            </div>
          </div>
        </a-card>
      </a-grid-item>
      <a-grid-item>
        <a-card :bordered="false">
          <div class="flex items-center justify-around">
            <div class="icon flex items-center justify-center" style="background-color: #eef4ff">
              <img src="@/assets/statistics/Work.png"/>
            </div>
            <div>
              <div class="amount font-bold">{{ userStore.user && userStore.user.statistics ? (userStore.user.statistics.month_member_count ? userStore.user.statistics.month_member_count + '+' : 0) : 0 }}</div>
              <div class="name">本月用户</div>
            </div>
          </div>
        </a-card>
      </a-grid-item>
    </a-grid>
  </div>
</template>
<script setup>
import { useUserStore } from '@/store'
const userStore = useUserStore()
</script>
<style scoped lang="less">
.top {
  .icon {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;

    img {
      height: 60%;
    }
  }
  .amount {
    font-size: 16px;
  }
  .name {
    font-size: 12px;
  }
}
</style>